<template>
  <div class="chart-container">
    <div class="top-box">
      <div
        class="top-left"
        @click="handleClick('table')"
        :class="{ topLeftActive: tab == 'table' }"
      >
        <div class="left">
          <div class="text-box">
            <img
              v-if="tab == 'table'"
              :src="require(`@/assets/img/data-icon1.png`)"
              class="icon"
            />
            <img
              v-else
              :src="require(`@/assets/img/chart-icon2.png`)"
              class="icon"
            />
            <span
              class="top-title"
              :style="tab == 'table' ? 'color:#FFFFFF' : 'color:#727478'"
              >巡检完成率</span
            >
          </div>
          <div
            class="top-name"
            :style="tab == 'table' ? 'color:#FFFFFF' : 'color:#4680FF'"
          >
            70%
          </div>
        </div>
        <div class="left-line" :class="{ leftLine: tab == 'table' }"></div>
        <div class="right">
          <span
            class="top-title"
            :style="tab == 'table' ? 'color:#FFFFFF' : 'color:#727478'"
            >上月</span
          >
          <div
            class="top-right-name"
            :style="tab == 'table' ? 'color:#FFFFFF' : 'color:#4680FF'"
          >
            93%
          </div>
        </div>
        <div class="nav" v-if="tab == 'table'"></div>
      </div>
      <div
        class="top-right"
        @click="handleClick('echarts')"
        :class="{ topRightActive: tab == 'echarts' }"
      >
        <div class="left1">
          <div class="text-box1">
            <img
              v-if="tab == 'echarts'"
              :src="require(`@/assets/img/chart-icon1.png`)"
              class="icon"
            />
            <img
              v-else
              :src="require(`@/assets/img/data-icon2.png`)"
              class="icon"
            />
            <span
              class="top-title1"
              :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#727478'"
              >事件上报</span
            >
          </div>
          <div class="top-name1">
            <span :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#44C85E'">
              70
            </span>
            <span
              class="top-right-names"
              :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#727478'"
            >
              件
            </span>
          </div>
        </div>
        <div class="right-line" :class="{ rightLine: tab == 'echarts' }"></div>
        <div class="right1">
          <span
            class="top-title1"
            :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#727478'"
            >上月</span
          >
          <div class="top-right-name1">
            <span :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#44C85E'">
              93
            </span>
            <span
              class="top-right-names"
              :style="tab == 'echarts' ? 'color:#FFFFFF' : 'color:#727478'"
            >
              件
            </span>
          </div>
        </div>
        <div class="nav1" v-if="tab == 'echarts'"></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="table-container" v-if="tab == 'table'">
        <div class="table-top">
          <div class="table-title">社区名称</div>
          <div class="sort-box">
            <div class="table-title">巡检完成率</div>
            <img
              :src="require(`@/assets/img/sort-up.png`)"
              class="sort-icon"
              @click="sortUp"
              v-show="sort == false"
            />
            <img
              :src="require(`@/assets/img/sort-down.png`)"
              class="sort-icon"
              @click="sortDown"
              v-show="sort == true"
            />
          </div>
          <div class="table-title">最近巡检时间</div>
        </div>
        <div class="table-bottom">
          <div
            class="table-row"
            v-for="(item, index) in tableList"
            :key="item.id"
            :style="
              index % 2 == 1
                ? 'background: #ffffff'
                : 'background: rgba(70, 128, 255, 0.08)'
            "
          >
            <div class="table-row-title">{{ item.name }}</div>
            <div class="table-row-box">
              <fm-progress
                class="table-row-progress"
                :color="
                  item.rate < 31
                    ? '#FF4545'
                    : item.rate == 100
                    ? '#44C85E'
                    : '#3DA1FE'
                "
                stroke-width="6"
                pivot-text=""
                :percentage="item.rate"
              />
              <span class="table-row-title" style="width: 20px"
                >{{ item.rate }}%</span
              >
            </div>
            <div class="table-row-title">{{ item.time }}</div>
          </div>
        </div>
      </div>
      <div class="echarts-container" id="main" v-show="tab == 'echarts'"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      tab: 'table',
      tableList: [
        {
          id: 1,
          name: '智慧树社区',
          rate: 70,
          time: '2022-09-04',
        },
        {
          id: 2,
          name: '智慧树社区',
          rate: 100,
          time: '2022-09-04',
        },
        {
          id: 3,
          name: '智慧树社区',
          rate: 20,
          time: '2022-09-04',
        },
        {
          id: 4,
          name: '智慧树社区',
          rate: 75,
          time: '2022-09-04',
        },
        {
          id: 5,
          name: '智慧树社区',
          rate: 42,
          time: '2022-09-04',
        },
        {
          id: 6,
          name: '智慧树社区',
          rate: 34,
          time: '2022-09-04',
        },

        {
          id: 7,
          name: '智慧树社区',
          rate: 50,
          time: '2022-09-04',
        },
        {
          id: 8,
          name: '智慧树社区',
          rate: 40,
          time: '2022-09-04',
        },
        {
          id: 9,
          name: '智慧树社区',
          rate: 30,
          time: '2022-09-04',
        },
      ],
      colorList: ['#FF4545', '#4545D1', '#44C85E', '#3DA1FE'],
      sort: false,
    }
  },
  methods: {
    handleClick(item) {
      this.tab = item
      if (this.tab == 'echarts') {
        this.loadEcharts()
      }
    },
    sortUp() {
      this.sort = true
      this.tableList.sort(function (a, b) {
        return a.rate - b.rate
      })
    },
    sortDown() {
      this.sort = false
      this.tableList.sort(function (a, b) {
        return b.rate - a.rate
      })
    },
    loadEcharts() {
      let myChart = echarts.init(document.getElementById('main'))
      let list = [
        { value: 7, name: 'P0紧急事件' },
        { value: 23, name: 'P1重要事件' },
        { value: 58, name: 'P2普通事件' },
        { value: 12, name: '其他事件' },
      ]
      let total = 0
      list.forEach((item) => {
        total += item.value
      })
      var option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          icon: 'rect',
          bottom: '3%',
          itemHeight: 8,
          itemWidth: 8,
          left: 'center',
          data: list,
          formatter: function (name) {
            let value = 0
            list.forEach((item) => {
              if (item.name == name) {
                value = item.value
              }
            })
            return [`{name|${name}}{value|${value}}`]
          },
          textStyle: {
            rich: {
              // top: { padding: [0, 0, 40, 0] },
              name: {
                fontSize: 10,
                lineHeight: 18,
                color: '#727478',
                width: 40,
                padding: [2, 18, 0, 0],
              },

              value: {
                fontSize: 10,
                lineHeight: 18,
                color: function (colors) {
                  var colorList = ['#FF4545', '#4545D1', '#44C85E', '#3DA1FE']
                  return colorList[colors.dataIndex]
                },
                width: 20,
                padding: [2, 8, 0, 0],
              },
              others: {},
            },
          },
          itemStyle: {
            borderWidth: 0,
            borderType: 'solid',
          },
        },
        series: [
          {
            name: '巡检记录',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '40%'], // 默认全局居中
            label: {
              show: true,
              position: 'outside',
              normal: {
                formatter: function (item) {
                  let p = 0
                  p = ((item.value / total) * 100).toFixed(2)
                  return p + '%'
                },
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: true,
              normal: {
                length: 15, // 修改引导线第一段的长度
                length2: 0, // 修改引导线第二段的长度
                lineStyle: {
                  color: '#B5B9BE', // 修改引导线的颜色
                },
              },
            },
            data: list.map((item, index) => {
              item.label = {
                color: this.colorList[index],
              }
              return item
            }),

            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#FF4545', '#4545D1', '#44C85E', '#3DA1FE']
                  return colorList[colors.dataIndex]
                },
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.chart-container {
  height: 750px;
  background: #ffffff;
  border-radius: 16px;
  .top-box {
    height: 140px;
    padding: 32px 32px 16px 32px;
    display: flex;
    justify-content: space-between;
    .top-left {
      position: relative;
      width: 326px;
      height: 130px;
      background: #ffffff;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
    }
    .topLeftActive {
      position: relative;
      width: 326px;
      height: 130px;
      background: linear-gradient(220deg, #39affd 0%, #477fff 100%);
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
    }
    .top-right {
      position: relative;
      width: 326px;
      height: 130px;
      background: #ffffff;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
    }
    .topRightActive {
      position: relative;
      width: 326px;
      height: 130px;
      background: linear-gradient(209deg, #77f763 0%, #26ab5b 100%);
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
    }
  }
  .bottom-box {
    padding: 0px 32px 0px 16px;
  }
  .icon {
    width: 36px;
    height: 36px;
  }
  .top-title {
    height: 36px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    // color: #727478;
    line-height: 36px;
  }
  .top-name {
    height: 36px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4680ff;
    line-height: 36px;
    text-align: left;
    margin-left: 36px;
    margin-top: 16px;
  }
  .top-right-name {
    height: 36px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4680ff;
    line-height: 36px;
    text-align: left;
    margin-left: 24px;
    margin-top: 16px;
  }
  .left {
    width: 70%;
    padding: 16px 16px;

    .text-box {
      display: flex;
    }
  }
  .right {
    width: 30%;
    padding: 16px 16px;
    text-align: center;
  }
  .top-title1 {
    height: 36px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #727478;
    line-height: 36px;
  }
  .top-name1 {
    height: 36px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #44c85e;
    line-height: 36px;
    margin-left: 36px;
    margin-top: 16px;
  }
  .top-right-name1 {
    height: 36px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #44c85e;
    line-height: 36px;
    text-align: left;
    margin-top: 16px;
  }
  .left1 {
    width: 70%;
    padding: 16px 16px;
    .text-box1 {
      display: flex;
    }
  }
  .right1 {
    width: 30%;
    padding: 16px 16px;
    text-align: center;
  }

  .nav {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #4193fe;
    position: absolute;
    bottom: -15%;
    left: 42%;
  }
  .nav1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #44c85e;
    position: absolute;
    bottom: -15%;
    left: 42%;
  }
  .leftLine {
    width: 2px;
    height: 130px;
    background: #ffffff;
    opacity: 0.12;
  }
  .rightLine {
    width: 2px;
    height: 130px;
    background: #ffffff;
    opacity: 0.12;
  }
  .left-line {
    width: 2px;
    height: 130px;
    background: #ebedef;
  }
  .right-line {
    width: 2px;
    height: 130px;
    background: #ebedef;
  }
  .table-container {
    .table-top {
      padding: 0px 24px 0px 16px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 26px;
      .table-title {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #15171a;
        line-height: 36px;
      }
    }
    .sort-icon {
      height: 32px;
      width: 32px;
    }
    .sort-box {
      display: flex;
    }
    .table-bottom {
      height: 480px;
      overflow: auto;
      .table-row {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 8px;
        padding: 0px 32px 0px 16px;
        .table-row-title {
          height: 36px;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #727478;
          line-height: 36px;
        }
      }
      .table-row-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .table-row-progress {
        width: 252px;
        margin-right: 16px;
      }
    }
  }
  .echarts-container {
    padding-left: 16px;
    height: 550px;
    width: 700px;
  }
  .top-right-names {
    width: 24px;
    height: 36px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 36px;
  }
}
</style>